
<!DOCTYPE html>
<html>
<head>
  <title>The VexFlow Sandbox</title>
  <link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT|Yanone+Kaffeesatz|Tangerine'
   rel='stylesheet' type='text/css'>
  <link href="../vextab/style.css" media="screen" rel="Stylesheet"
    type="text/css" />

  <!-- VexFlow Compiled Source -->
  <script src="../build/vexflow/vexflow-debug.js"></script>
  <script src="../support/vexflow-min.js"></script>

  <!-- Support Sources -->
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

  <style type="text/css">
    canvas {
      background: #eed;
      padding: 10px;
      border: 10px solid #ddc;
    }

    div.egcode {
      font-family: Courier;
      font-size: 12px;
    }
  </style>

  <script>
    /* Take raw javascript code, and return moderately useful HTML */
    function prettify_code(code) {
      var lines = code.split(/\r\n|\n|\r/);
      var new_lines = [];
      for (var j = 0; j < lines.length; ++j) {
        code = lines[j];
        code = code.replace(/\s/g, "&nbsp;");
        code = code.replace(/>/g, "&gt;");
        code = code.replace(/</g, "&lt;");
        new_lines.push(code);
      }

      pretty_code = "<div class='egcode'>" + new_lines.join("<br/>") + "</div>";
      return pretty_code;
    }

    /*
       Find all the javascript examples and copy their source code
       into the associated <code> blocks.
    */
    $(function() {
      $("div.description").each(function(index, sel) {
        codes = $(sel).find("code.example");
        codes.each(function(i, s) {
          var example = $(s).attr("example");
          var code = $($(sel).find(
            "div.example." + example + " script")[0]).html();
          $(s).html(prettify_code(code));
         })
      })
    })
  </script>
</head>

<body>
  <div class="vex">
    <a href="http://vexflow.com">VexFlow</a> |
    <a href="http://my.vexflow.com">My VexFlow</a> |
    <a href="http://vexflow.com/vextab">VexTab</a> |
    <a href="http://0xfe.blogspot.com">0xfe</a>
  </div>

  <div class="header">
    <h1>The VexFlow Sandbox</h1>
    <div class="main">
      <b>A live editor for experimenting with VexFlow</b>
    </div>pre-pre-pre-alpha by <a href="http://0xfe.blogspot.com">0xfe</a>.
  </div>

  <div class="content">


    <h2>Have some fun!</h2>

    <div class="description sandbox">
      Try out the VexFlow API in this live editor.
      <p/>
      <div class="editor-error"><span class="text"></span></div>
      <p/>
      <div class="example sandbox" example="sandbox">
        <textarea id="sandbox" class="editor"
                  style="width: 641px; height: 180px; ">
// Get the rendering context
var canvas = $("div.sandbox div.sandbox canvas")[0];

var renderer = new Vex.Flow.Renderer(canvas,
Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
renderer.resize(500, 300); // Resize and clear canvas
ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

// Create and draw the tablature stave
var tabstave = new Vex.Flow.TabStave(10, 0, 500);
tabstave.addTabGlyph();
tabstave.setContext(ctx).draw();

// Create some notes
var notes = [
  // A single note
  new Vex.Flow.TabNote({
    positions: [{str: 3, fret: 7}],
    duration: "q"}),

  // A chord with the note on the 3rd string bent
  new Vex.Flow.TabNote({
    positions: [{str: 2, fret: 10},
                {str: 3, fret: 9}],
    duration: "q"}).
  addModifier(new Vex.Flow.Bend("Full"), 1),

  // A single note with a harsh vibrato
  new Vex.Flow.TabNote({
    positions: [{str: 2, fret: 5}],
    duration: "h"}).
  addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0)
];

Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);</textarea>
        <p/>
        <canvas width=625 height=160></canvas>

        <style>
        .editor {
          background: #cfc;
          border: 10px solid #afa;
          font-family: Courier;
          font-size: 14px;
        }


        div.editor-error .text {
          background: #faa;
          border: 5px solid #f88;
          font-family: Courier;
          font-size: 14px;
          padding: 3px;
          display: none;
        }

        </style>
        <script>

        var timeout;
        var msg = $('div.editor-error .text');

        function live_code() {
          var code = $("#sandbox").val();

          try {
            eval(code);
            msg.html('').hide();
          } catch (e) {
            msg.html(e.toString()).show();
          }

        }

        $('#sandbox').on('blur keyup paste', function() {
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(live_code, 200);
        });

        live_code();

        </script>
        <p/>
      </div>

    <center>
      <h2>
        Confused? Go read the <a href="tutorial.html">tutorial</a>.
      </h2>
    </center>
  </div>
</body>

</html>
